
// 选择用户名对应的输入框
let usernameInput = document.querySelector( '[name=username]' );

let fn = function( e ){ // e 表示失去焦点事件
    let t = e.target ; // 谁失去焦点就获得谁
    let tip = t.nextElementSibling ; // 获得下一个元素
    let value = t.value ; // 获取输入框中的内容
    console.log( value );

    // 1、创建用来发送请求和接受响应的对象(实例)
    let $http = new XMLHttpRequest();
    console.log( 'UNSENT: ' , $http.readyState );

    let listener = function(){
        console.log( $http.readyState );
        // 判断响应是否结束
        if( $http.readyState === $http.DONE ){
            // 若响应结束则取得响应体中的内容
            console.log( $http.response );
            let m = JSON.parse( $http.response );
            const list = tip.classList ;
            switch( m.state ) {
                case 'success' : 
                    if( list.contains( 'tip-fail' )){
                        list.remove( 'tip-fail' ) ;
                    }
                    list.add( 'tip-success' );
                    break;
                case 'fail' : 
                    if( list.contains( 'tip-success' )){
                        list.remove( 'tip-success' ) ;
                    }
                    list.add( 'tip-fail' );
                    break;
            }
            tip.innerHTML = m.message ;
        }
    }

    // 2、监听 $http 实例上 readyState 属性的变化
    // $http.onreadystatechange = listener ;
    $http.addEventListener( 'readystatechange' , listener , false );

    let method = 'post' ;
    let url = '/customer/check/username' ;
    // 3、打开连接
    $http.open( method , url );

    // 4、若请求方式为POST则需要设置请求头
    if( method.toLowerCase() == 'post' ){
        $http.setRequestHeader( 'content-type' , 'application/json' );
    }

    /*
    let params = `{ "username": "${value}"" }` ;
    console.log( params );
    */

    let params = { username : value };
    let json = JSON.stringify( params );

    // 5、发送请求
    $http.send( json );

} // 监听器函数结束

// focus 表示获得焦点 ， blur 表示失去焦点
usernameInput.addEventListener( 'blur' , fn , false );